<template>
    <div class="personalized">
        <div class="head">
          <div class="title">推荐歌单</div>
          <div class="more">更多></div>
        </div>
        <!--推荐歌单-->
        <div class="main">
          <!--每日歌曲推荐 接口 recommend/songs-->
          <div class="recommend_songs" v-if="flag" @click="DaySongsRecommend">
            <div class="time">
              <div class="day">{{time.day}}</div>
              <div class="date">{{time.date}}</div>
            </div>
            每日歌曲推荐
          </div>
          <div class="recommend_resource" 
          v-for="(item,index) in personalizedList" 
          :key="index"
          @click="getPlayListDetail(item.id)"
          > 
            <div class="iconfont  iconshipin playCount">{{flag ? item.playcount : item.playCount | playCounFormat}}</div>
            <img :src="item.picUrl" alt="">
            <div class="songListName">{{item.name}}</div>
          </div>
        </div>
    </div>
</template>

<script>
import {_getPlaylistDetail} from '../../../network/detail'
import {_playCountFormat} from '../../../util/tool'
import bus from '../../../util/bus'
export default {
    name: 'personalized',
    props: [
        'personalizedList'
    ],
    data() {
        return {
          playList:[],
          flag:false,
          time:{
            day:'',
            date:'',
          }
        };
    },
    computed: {

    },
    created() {
      bus.$on('isLogin',(res => {
        if(res)this.flag = true
      }))
      if(sessionStorage.getItem('cloud_cookie')){
        this.flag = true
      }
      let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let date = new Date()
      this.time.day = weeks[date.getDay()]
      this.time.date = date.getDate()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
      // 获取歌单详情
      getPlayListDetail(id){
        // 跳转歌单详情页
        this.$router.push({path:'/playListDetail',query:{id}})
      },
        // 跳转每日歌曲推荐
      DaySongsRecommend(){
        this.$router.push({path:'/daySongsRecom',query:{day:this.time.day,date:this.time.date}})
      }
    },
    filters:{
      // 歌单收听量格式化
      playCounFormat(count){
        return _playCountFormat(count)
      }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
@itemecolor:#c62f2f;
@more:#ccc;
@title:20px;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.personalized{
  .head{
    .position_flex;
    height: 40px;
    border-bottom: 1px solid;
    .title{
      font-size: @title;
    }
    .more{
      color: @more;
    }
  }
  .main{
    .position_flex(flex-start);
    flex-wrap: wrap;
    .recommend_songs,.recommend_resource{
      position: relative;
      width: 200px;
      height: 250px;
      margin: 20px 11px;
      cursor: pointer;
      .time{
        position: relative;
        width: 100%;
        height: 200px;
        background-color: #fff;
        margin-bottom: 10px;
        .day{
          position: absolute;
          top: 20%;
          font-size: 18px;
          color: #666666;
        };
        .date{
          position: absolute;
          top: 30%;
          font-size: 100px;
          color: #E03F40;
        }
        .day,.date{
          left: 50%;
          transform: translateX(-50%);
          
        }
      }
    }

    .recommend_resource{
      img{
          width: 100%;
          height: 200px;
      }
      .playCount{
        position: absolute;
        top:5px;
        right: 5px;
      }
      .songListName{
          line-height: 25px;
      }
    }
  }
}
</style>
